<template>
  <div class="" style="min-width: 1500px; background-color: rgb(251, 251, 251)">
    <nav-bar></nav-bar>
    <content>
      <div
        style="
          margin-top: 50px;
          min-width: 1350px;
          background-color: rgb(251, 251, 251);
        "
      >
        <el-tabs :tab-position="tabPosition">
          <el-tab-pane label="个人资料">
            <div class="div1">个人资料</div>
            <el-form
              class="changeform"
              :label-position="labelPosition"
              label-width="400px"
              :model="user"
            >
              <el-form-item label="昵称">
                <el-input v-model="user.user_nickname"></el-input>
              </el-form-item>
              <el-form-item label="出生日期">
                <div class="userData">
                  <el-date-picker
                    v-model="user.user_data"
                    placeholder="选择日期时间"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>

              <el-form-item label="邮箱">
                <el-input v-model="user.user_post"></el-input>
              </el-form-item>
              <el-form-item label="联系手机">
                <el-input v-model="user.user_tel"></el-input>
              </el-form-item>
              <el-form-item label="QQ">
                <el-input v-model="user.user_qq"></el-input>
              </el-form-item>
              <div class="user_img">
                <el-row class="demo-avatar demo-basic">
                  <el-col :span="12">
                    <div class="demo-basic--circle">
                      <div class="block">
                        <el-avatar
                          :size="100"
                          :src="user.user_image"
                        ></el-avatar>
                      </div>
                    </div>
                  </el-col>
                  <el-upload
                    :limit="1"
                    class="avatar-uploader"
                    action="http://localhost:8000/user/changeImg"
                    :auto-upload="false"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :on-change="onChangeFile"
                  >
                    <el-row>
                      <el-button @click="changeimg" type="success"
                        >上传头像</el-button
                      >
                    </el-row>
                  </el-upload>
                </el-row>
              </div>
            </el-form>
            <el-button @click="changUser" class="success" type="success"
              >保存更改</el-button
            >
          </el-tab-pane>
          <el-tab-pane label="账号与密码">
            <div class="div1">账号与密码</div>
            <div>
              <el-form
                class="changeform2"
                :label-position="labelPosition"
                label-width="400px"
                :model="user"
              >
                <el-form-item label="密码">
                  <el-input
                    placeholder="请输入密码"
                    v-model="user.user_password"
                    show-password
                  ></el-input>
                </el-form-item>
              </el-form>
              <el-button @click="changepassword" class="password" type="success"
                >保存更改</el-button
              >
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </content>
    <footer>
      <div class="footer_div1">
        <div style="width: 50%">
          <div>
            <img
              class="poco_logo"
              src="http://static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_header/i/black-logo_b0fae42.png"
              alt=""
            />
            <div>
              <div>
                <p align="left">
                  颇可POCO.CN是以摄影爱好者为核心的图片分享社区，汇聚海量原创影像，是国内极具影响力的摄影文化交流平台。
                </p>
              </div>
            </div>
          </div>
          <ul>
            <li>帮助中心</li>
            <li>|</li>
            <li>留言反馈</li>
            <li>|</li>
            <li>商务合作</li>
          </ul>
          <div style="width: 100%" class="div_p">
            <p align="left" class="p1">
              <span> <a href="#">增值电信经营许可证</a></span>
              <span><a href="#">不良信息举报中心</a></span>
              <span><a href="#">涉未成年人网络有害信息举报专区</a></span>
            </p>
            <p align="left" class="p2">
              POCO网违法和不良信息举报电话：020-89899291
              举报邮箱：network@poco.cn
            </p>
            <p align="left" class="p2">
              POCO网涉未成年人举报电话：020-89899291 举报邮箱：network@poco.cn
            </p>
          </div>
        </div>
        <div style="width: 50%">
          <div>
            <h2>关于我们</h2>
            <div class="wb">
              <img
                src="https://static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_footer/i/sina_eb6073b.png?__sprite"
                alt=""
              />
            </div>
            <div class="wx">
              <img
                src="https://static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_footer/i/weixin_19787f6.png?__sprite"
                alt=""
              />
            </div>
          </div>
          <div>
            <h2 style="margin-left: -250px">APP下载</h2>
            <div>
              <img
                style="width: 200px; margin-left: 100px"
                src="http://static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_footer/i/code-img_8ed6a44.png"
                alt=""
              />
            </div>
            <div>
              <el-button class="iPhone" type="success">iPhone下载</el-button>
              <el-button class="Android" type="success">Android下载</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="footer_div2">
        备案号：<a href=""> 粤B2-20030218号-2</a> ICP证号：<a href=""
          >粤B2-20030218</a
        >
        Copyright © 2020
        <img
          src="http://static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_footer/i/logo_down_c6789b4.jpg"
          alt=""
        />
        <img
          src="http://static-c.pocoimg.cn/project/poco_new_pc/prod/online/image/widget/poco_footer/i/poli_8a53b90.png"
          alt=""
        />
        <a href=""> 粤公网安备 44010402000060号</a>
      </div>
    </footer>
  </div>
</template>

<script>
import {
  changeUserImg,
  getUser,
  changeuser,
  changePassword,
} from "@/network/user.js";
import navBar from "@/components/navBa.vue";
export default {
  components: {
    navBar,
  },
  data() {

    return {
     
      tabPosition: "left",
      labelPosition: "top",
      user: {
        user_password: "",
        user_nickname: "",
        user_data: "",
        user_post: "",
        user_tel: "",
        user_qq: "",
        user_image: "",
      },
    };
  },
  methods: {
onChangeFile(file){
  console.log(file.name);
  changeUserImg(1,file)

},

    changeimg() {
      this.$refs.uploadFile.submit();
    },

    changUser() {
      changeuser(this.user).then((res) => {
        getUser(1).then((res) => {
          this.user = res.data;
        });
      });
    },
    changepassword() {
      changePassword(this.user.user_password, this.user.user_id).then((res) => {
        getUser(1).then((res) => {
          this.user = res.data;
        });
      });
    },
  },
  mounted() {
    getUser(1).then((res) => {
      this.user = res.data;
    });
  },
};
</script>
<style scoped lang="less">
body {
  background-color: gray;
}
content {
  div {
    /deep/.el-tabs__active-bar {
      background-color: #67c23a;
    }
    /deep/.el-input__inner {
      width: 400px;
      margin-right: 100%;
    }
    .userData {
      margin-left: -25.5%;
    }
    /deep/.el-input {
      margin: 0px 100px;
    }
    width: 90%;
    margin-left: 10%;
    .success {
      position: relative;
      left: -430px;
    }
    .div1 {
      font-size: 30px;
      margin: 30px -370px;
    }
    .user_data {
      /deep/.n-date-picker {
        margin-left: 95px;
      }
      /deep/.n-input__input-el {
        width: 500px;
        height: 40px;
        line-height: 40px;
        margin-left: 5px;
      }
    }
    .changeform {
      margin-left: -200px;
      /deep/.el-form-item__label {
        padding-left: 100px;
      }
      .user_img {
        position: absolute;
        top: 160px;
        left: 100px;

        /deep/.el-button {
          margin: 10px -190px;
        }
      }
    }
    .changeform2 {
      /deep/.el-form-item__label {
        position: relative;
        left: -180px;
      }
      /deep/.el-input__inner {
        margin-left: -38%;
      }
    }
    .password {
      margin-left: -108.5%;
    }
  }
}
footer {
  min-width: 1350px;
  margin-top: 100px;
  background-color: white;
  .footer_div1 {
    margin-top: -50px;
    width: 100%;
    height: 300px;
    div {
      float: left;
      ul {
        padding-left: 80px;
        li {
          color: rgb(175, 174, 174);
          margin: 10px 20px;
          float: left;
          list-style: none;
        }
      }
      .div_p {
        span {
          font-size: 10px;
          margin: 0px 10px;
          a:hover {
            color: greenyellow;
          }
          a {
            text-decoration: none;
            color: rgb(130, 128, 131);
          }
        }
        .p1 {
          margin-top: -5px;
          margin-left: 90px;
        }
        .p2 {
          font-size: 10px;
          color: rgb(209, 212, 212);
        }
      }
    }
    div:nth-of-type(1) {
      .poco_logo {
        position: relative;
        width: 200px;
        top: 30px;
        left: -170px;
      }
      div {
        margin-top: 10px;
        p {
          font-size: 14px;
          width: 70%;
          margin-left: 100px;
          color: rgb(143, 144, 145);
        }
      }
    }
    div:nth-of-type(3) {
      background-color: red;
    }
  }
  .footer_div2 {
    color: rgb(202, 201, 201);
    font-size: 10px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: rgb(251, 251, 251);
    img {
      width: 18px;
      margin: -6px 5px;
    }
    a {
      color: rgb(117, 116, 116);
      text-decoration: none;
    }
    a:hover {
      color: greenyellow;
    }
  }
}
.wb {
  position: relative;
  top: 60px;
  left: 20px;
}
.wx {
  position: relative;
  top: 130px;
  left: -10px;
}
.iPhone {
  position: relative;
  top: 40px;
  left: 40px;
}
.Android {
  position: relative;
  top: 110px;
  left: -85px;
}
</style>